<template>
  <div style="width: 100vw; height: 100vh">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-title-1"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item v-for="(item,index) in menu1"  :index="index" :key="item.toString()">{{
        item.title
      }}</el-menu-item>
    </el-menu>
    <VisualTemplate :option="mainConfig">
      <!-- 依次写出需要展示的单元，单元数（sectionArr.length）
        <div class="box" :slot="index" v-for="(item,index) in mainConfig.sectionArr">
            <span>{{item}}</span>   
        </div> -->

      <div slot="1">
        <!-- 第一个单元 -->
        <div class="content-item"><chart1 /><chart4 /><chart5 /><chart6 /></div>
      </div>
      <div slot="2">
        <!-- 第一个单元 -->
        <div class="content-item"><chart2 /></div>
      </div>
      <div slot="3">
        <div class="content-item"><chart3 /></div>
        <!-- 第三个单元 -->
        <!--<dv-decoration-3 style="width:250px;height:30px;" /> DataV装饰器-->
      </div>
      <div slot="4">
        <div class="content-item"><chart4 /></div>
        <!-- 第三个单元 -->
        <!--<dv-decoration-3 style="width:250px;height:30px;" /> DataV装饰器-->
      </div>
      <div slot="5">
        <div class="content-item"><chart5 /></div>
        <!-- 第三个单元 -->
        <!--<dv-decoration-3 style="width:250px;height:30px;" /> DataV装饰器-->
      </div>
    </VisualTemplate>
      <el-menu
      :default-active="activeIndex"
      class="el-menu-title-2"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item v-for="(item,index) in menu1"  :index="index" :key="item.toString()">{{
        item.title
      }}</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
import chart1 from "./components/1";
import chart2 from "./components/2";
import chart3 from "./components/3";
import chart4 from "./components/4";
import chart5 from "./components/5";
import chart6 from "./components/6";
// import centerRight1 from "./centerRight1";
// import centerRight2 from "./centerRight2";
// import center from "./center";
// import bottomLeft from "./bottomLeft";
// import bottomRight from "./bottomRight";
import data from "./config/index";
import VisualTemplate, {
  visualConfig,
  visualSetOptions,
} from "@/components/visual-platform";
const menu1 = [
  {
    title: "政务服务",
    url: "",
  },
  {
    title: "服务效能",
    url: "",
  },
  {
    title: "特别呈报",
    url: "",
  },
  {
    title: "应急调度",
    url: "",
  },
  {
    title: "经济发展",
    url: "",
  },
];
export default {
  components: {
    VisualTemplate,
    chart1,
    chart2,
    chart3,
    chart4,
    chart5,
    chart6,
    // bottomRight,
  },
  mixins: [drawMixin],
  data() {
    return {
      menu1,
      defConfig: data,
    };
  },
  created() {
    this.mainConfig = visualSetOptions(this.defConfig);
  },
};
</script>

<style>
.content-item {
  padding: 20px;
  color: aliceblue;
}
.el-menu-title-1 {
   border-bottom: none !important;
    display: flex;
    left: 5%;
    z-index: 200;
    position: fixed;
    top: 2%;
    width: 45%;
    background: none;

}
.el-menu-title-2 {
    border-bottom: none !important;
    display: flex;
    right: 5%;
    z-index: 200;
    position: fixed;
    top: 2%;
  
    background: none;

}
</style>